<template>
	<view>
			<view class="team_cate">{{cate_name}}</view>
			<view class="form_item">
				<view>标题:</view>
				<input type="text" placeholder="请输入标题"/>
			</view>
			<view class="vertical_line"></view>
			<view class="form_item">
				<view>出发时间:</view>
				<uni-datetime-picker type="datetime" return-type="timestamp"/>
			</view>
			<view class="vertical_line"></view>
			<view class="form_item">
				<view>出发地点:</view>
				<input type="text" placeholder="请输入出发地点"/>
			</view>
			<view class="vertical_line"></view>
			<view class="form_item">
				<view>到达地点:</view>
				<input type="text" placeholder="请输入到达地点"/>
			</view>
			<view class="vertical_line"></view>
			<view class="form_item">
				<view>备注:</view>
				<input type="text" placeholder="请输入备注"/>
			</view>
			<view class="vertical_line"></view>
			<view class="people_number">
				<view class="people_number_header">
					<view>总人数</view>
					<view v-if="peopleChoiceStatus" @click="changePeopleChoiceStatus">不限性别</view>
					<view v-if="!peopleChoiceStatus" @click="changePeopleChoiceStatus">限制性别</view>
				</view>
				<view class="total_people" v-if="peopleChoiceStatus">
					<view class="left">
						<view>总人数</view>
						<image src="/static/logo.png"></image>
					</view>
					<input  type="number" placeholder="请输入总人数"/>
				</view>
				<view class="total_people" v-if="!peopleChoiceStatus">
					<view  class="left">
						<view class="left">
							<view>男</view>
							<image src="/static/logo.png"></image>
						</view>
						<input  type="number" placeholder="请输入总人数"/>
					</view>
					<view  class="left">
						<view class="left">
							<view>女</view>
							<image src="/static/logo.png"></image>
						</view>
						<input  type="number" placeholder="请输入总人数"/>
					</view>
				</view>
				<view class="addImage">
					<view></view>
					<view></view>
					<view></view>
				</view>
				<view class="footer">
					<view class="">存草稿</view>
					<view class="">发布</view>
				</view>
				<view></view>
			</view>
	</view>
</template>

<script>
	import UniDatetimePicker from "@/components/uni-datetime-picker/uni-datetime-picker.vue"
	export default {
		onLoad(object) {
			this.pageId=object.pageId,
			this.cate_name=this.category_list[this.pageId]["name"]
		},
		components:{
			UniDatetimePicker:UniDatetimePicker
		},
		data() {
			return {
				formData:{
					name:123,
					age:1,
				},
				category_list:[{},{
					id:1,
					name:"空位",
				},{
					id:2,
					name:"拼车",
				},{
					id:3,
					name:"拼单",
				},{
					id:4,
					name:"竞赛",
				},{
					id:5,
					name:"运动",
				},{
					id:6,
					name:"娱乐",
				},{
					id:7,
					name:"自习",
				},{
					id:8,
					name:"其它",
				}],
				formData:{
					name:'',
					age:''},
				peopleChoiceStatus:0,
				
			}
		},
		methods: {
			print(){
				console.log(this.cate_name)
			},
			changePeopleChoiceStatus(){
				this.peopleChoiceStatus=!this.peopleChoiceStatus
			}
		}
	}
</script>

<style>

.vertical_line{
	height: 5rpx;
	background-color: #6ba2cc;
}
.form_item{
display: flex;	
}
.people_number{
	display: flex;
	flex-direction: column;
}
.people_number_header{
	display: flex;
	justify-content: space-between;
}
.total_people{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.total_people .left, .man{
	display: flex;
	flex-direction: row;
}
.total_people image{
	height: 50rpx;
	width: 50rpx;
}
.addImage{
	display: flex;
	justify-content: space-around;
}
.addImage view{
	height: 200rpx;
	width: 200rpx;
	background-color: antiquewhite;
}
.footer{
	display: flex;
	justify-content: space-around;
}
</style>
